<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <title data-color="#f8f8f9">商品详情</title>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <title>商品详情</title>
    <!--引入初始化样式-->
    <link rel="stylesheet" href="../../b2c/lib/css/style-min.css">
    <!--引入YUDI样式-->
    <link rel="stylesheet" href="../../b2c/lib/css/ydui.css">
    <!--引入YUDI自适应解决方案类库-->
    <script src="../../b2c/lib/js/flexible/flexible.js"></script>
    <!-- 引入jQuery 2.0+ -->
    <script src="../../b2c/lib/js/jquery/jquery-2.1.4.min.js"></script>
    <!-- 引入common -->
    <script src="../lib/js/common/common.js"></script>
    <!--swiper-->
    <link rel="stylesheet" href="../lib/js/swiper/swiper-3.3.1.min.css">
    <script src="../lib/js/swiper/swiper-3.3.1.min.js"></script>
    <!-- 引入vue -->
    <script src="../../b2c/lib/js/vue/vue.js"></script>
    <script src="../lib/js/weui/jquery-weui.min.js"></script>
    <!--微信JS-SDK -->
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <!--引用的高德地图key值-->
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.2&key=4a509f214a062896bf59750c168d8495&plugin=AMap.Geocoder"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
    <!--引入对应的css-->
    <link rel="stylesheet" href="../css/goods/hx_goods.css">
    <link rel="stylesheet" href="../css/goods/goods_com.css">
</head>
<div id='con'></div>
<div id="tip" style="z-index:10000"></div>
<body data-color="#f8f8f9">
<div class="goods" id="hx_goodsEle">

    <div class="goodsSwiper">
        <div class="swiper-container swiper-container-horizontal">
            <div class="swiper-wrapper">
                <!--<div class="switchBtn">-->
                    <!--<img src="../images/goods/shipin.png" alt="" class="videoBtn" @click="carouselSwitch(0)" v-if="carouselVideos.length!==0">-->
                    <!--<img src="../images/goods/tupian.png" alt="" class="tupianBtn" @click="carouselSwitch(1)" v-if="carouselVideos.length!==0">-->
                <!--</div>-->
                <!--<div class="swiper-slide" v-for="value in carouselVideos" v-if="carousel==0">-->
                    <!--<video  controls>-->
                        <!--<source :src="value.videoUrl">-->
                    <!--</video>-->
                <!--</div>-->
                <!--<div class="swiper-slide" v-for="value in carouselImgs" v-if="carousel==1" >-->
                    <!--<img :src="value.navigateImage" alt="">-->
                <!--</div>-->
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <div class="goodsHai" v-show="channelShow">
            <img src="../images/goods/haitaobiaoqian@2x.png" alt="">
        </div>
        <!--<div class="back-money">购买本商品即可获得<span>&yen;{{userDirectCommission-->
<!--}}</span>佣金</div>-->
    </div>
    <!--swiper-->
    <div class="goods-warp">
        <div class="price clearfix">
            <div class="market-price"><i>￥</i><span class="price-id">{{lowestPrice}}</span></div>
            <div class="original-price">
                市场价:
                <del><i>￥</i><span id="original-price" v-cloak>{{suggestedPrice}}</span></del>
            </div>
            <div class="makeMoney"  style="display: none;">
                <span>分享赚5元</span>
            </div>
        </div>
        <h3><span v-cloak>{{name}}</span></h3>
    </div>
    <!--限购数量   返回天数 -->
    <!--<div class="limited-warp clearfix" v-if="goodsExplainList.length>0">-->
        <!--<div class="fl" v-for="item in goodsExplainList">-->
            <!--&lt;!&ndash;<img :src="item.image" alt="">&ndash;&gt;-->
            <!--<span>{{item.explain}}</span>-->
        <!--</div>-->


    <!--</div>-->
    <!--限购数量   返回天数 -->
    <!--服务条款-->
    <div class="hx_server">
        <a class="" id="deliver-id" href="javascript:;" onclick="deliverPact()" v-show="goodsServiceList.length>0">
            <div class="clearfix" id="server-html-id">
                <div class="server">
                    <!--<i></i><span>24小时发货</span><i></i><span>55元包邮</span><i></i><span>不退不换</span>-->
                    <i></i><span>正品承诺</span>
                </div>
            </div>
        </a>
    </div>
    <!--/服务条款-->
    <div style="height: 7px;background: #f9f8f8;" v-if="commentList.length>0"></div>
    <!--商品评论-->
    <div class="goodsCom" v-if="commentList.length>0">
        <p class="comCap"><i></i>大家都在说</p>
        <div class="goodsCap flex">
            <div class="capIcon">
                <img v-bind:src="commentList[0].picture" alt="">
            </div>
            <div class="capMain">
                <p class="mainName" v-cloak>{{commentList[0].nickName}}</p>
                <p class="mainText" v-cloak>{{commentList[0].commentText}}</p>
                <ul class="capMainImg clearFix">
                    <li v-for="(ele,ind) in commentList[0].imgArr">
                        <img v-bind:src="ele" alt="">
                    </li>
                </ul>
            </div>
        </div>
        <a class="goodCombtn" href="javascript:;"
           v-bind:href="'./goods_com.html?commentCount='+commentCount+'&goodsId='+goodsId">
            查看全部
            <span v-cloak>{{commentCount}}</span>
            评论
        </a>
    </div>
    <!--/商品评论-->
    <div style="height: 7px;background: #f9f8f8;"></div>
    <!--商品详情-->
    <div class="goodsInf goodsCom">
        <p class="comCap"><i></i>商品详情</p>
        <ul class="infImg">
            <li v-for="(ele,index) in goodDetailList">
                <img v-bind:src="ele.imagePath" alt="">
            </li>
        </ul>
    </div>
    <!--商品详情-->
    <div style="height: 50px;background: #ffffff;"></div>
    <!--立即购买-->
    <div class="goods-foot">
        <div class="goods-foot-box flex">
            <a class="buy-goods" href="javascript:;" onclick="buyNow()">立即购买</a>
        </div>
    </div>
    <!--/加入购物车-->
    <!--服务条款    打开时展示的服务条款-->
    <div class="fixed-layer" id="server-layer-id" style=""></div>
    <div class="layer-container server-fixed" style="">
        <div class="server-con">
            <h5>服务条款</h5>
            <div class="server-html-box">
                <div v-for="(citem,cindex) in goodsServiceList">
                    <div class="server-1" ><img src="" v-bind:src="citem.image"><span>{{citem.name}}</span></div>
                    <p v-cloak>{{citem.content}}</p>
                </div>

            </div>
            <a class="clsoe-pact" href="javascript:;" onclick="cloasePact()">关闭</a>
        </div>
    </div>
    <!--服务条款-->
    <!--判断规格和尺寸-->
    <div class="fixed-layer" id="shop-layer-id" onclick="clearShop()"></div>
    <div class="layer-container shop-fixed">
        <div class="shop-con">
            <div class="shop-head-warp">
                <div class="shop-head-con">
                    <div class="imgs"><img src="" v-bind:src="specImg"/></div>
                    <div class="shop-head-text">
                        <h4></h4>
                        <p class="add-price">
                            <label>￥<span class="add-shop-price">{{specPrice}}</span></label>
                        </p>
                        <p class="spanEle" v-cloak>库存: {{inventoryNum}}件</p>
                        <p class="select">
                            规格: <label id="select-label-id" v-if="specDescName.length>0">{{specDescName}}</label>
                        </p>

                    </div>
                    <div class="shopBtn" onclick="clearShop()">
                        <img src="../images/goods/guanbi@2x.png" alt="">
                    </div>
                </div>
                <div class="shop-head-con-bg"></div>
            </div>
            <p class="spanHei">
                <span></span>
            </p>
            <div class="scrollBox" v-cloak>
                <div class="ulBox">
                <ul class="shop-buy-control clearfix">
                    <div v-for="(item,index) in specDescList" :key="index" >
                        <li class="shop-buy-group"><h3>{{item.name}}：</h3>
                            <div class="shop-buy-classify-items shop-buy-colour-id">
                                <label
                                        v-for="(ele,ind) in item.value"
                                        v-on:click="ele.flag&&selSpecFun(ele,item,index,ind)"
                                        v-bind:class="{'checked':ele.seled,'spec':!ele.flag}"  v-bind:data-id="ele.specificationDetailId">
                                    {{ele.detailName}}
                                </label>
                            </div>
                        </li>
                    </div>
                </ul>
                <div class="shop-buy-number clearfix" style="">
                    <h2 class="fl">数量</h2>
                    <div class="shop-buy-number-control fr">
                        <span class="decrease" onclick="ProductCode(0)"><i class="active"></i></span>
                        <input type="number" value="1" min="1" max="70" name="quantity" class="num" disabled="disabled" style="">
                        <span class="increase" onclick="ProductCode(1)"><i></i></span>
                    </div>
                </div>
            </div>
                <!--推荐店铺-->
                <div class="recommendStores" v-if="isShow">
                    <h4>推荐店铺</h4>
                    <div class="stores clearfix" v-for="(val,ind) in storesList">
                            <div class="left">
                              <div class="top" >
                                <span>{{val.storeName}}</span>
                                  <span class="stores_price" v-cloak>{{val.salePrice | unitConFun}}元</span>
                              </div>
                                <div class="bottom">
                                    <span v-if="val.openExpress">
                                        <img src="../images/goods/kuaidisong.png" alt="">
                                        快递送
                                    </span>
                                     <span v-if="val.openInstall">
                                        <img src="../images/goods/daodianqu.png" alt="">
                                        到店取
                                    </span>
                                     <span v-if="val.openFlashExpress">
                                        <img src="../images/goods/jishisong.png" alt="">
                                        及时送
                                    </span>
                                    <b class="distance">{{val.distance}}</b>
                                </div>
                            </div>
                            <div class="right">
                                <input type="radio" name="radio-pay-way" value="4" class=" selectStores_radio" @click="seleStore(val,ind)" v-bind:class="{active:val.selected}">
                            </div>
                    </div>

                </div>
            </div>
            <div class="shopButton">
                <button class="add-shop-btn" type="button" onclick="SelectAddShop()" v-bind:class="{active:isShow}">立即购买</button>
            </div>
        </div>
    </div>
    <!--<button>清除缓存</button>-->
    <!--/判断规格和尺寸-->
</div>
</body>
<script src="../lib/js/ui.js"></script>
<script src="../../b2c/js/goods/hx_goods.js"></script>
</html>
